<template>
  <Card>
    <p slot="title">当前消防水源情况</p>
    <div class="chart" id="chart-water-source"></div>
    <Divider />
    <span class="text">水源异常率:{{percentage}}%</span>
    <Spin v-show="loading" fix size="large" />
  </Card>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      percentage: 0,
      option: null,
      loading: false
    };
  },
  methods: {
    renderChart() {
      this.loading = true;
      axios
        .get(
          "http://114.115.153.22:3333/Interface/Methods/RedictToole/RedictPage.ashx?apiUrl=http://58.16.86.76:9999/xfweb/Waterinfo/getWaterStatus"
        )
        .then(res => {
          let json = res.data;
          this.option = {
            legend: {
              top: "top",
              left: "center",
              data: ["状态正常", "压力不足", "已损坏"]
            },
            color: [this.COLORS[4],this.COLORS[1],this.COLORS[0]],
            series: [
              {
                name: "水源情况",
                type: "pie",
                radius: "40%",
                center: ["50%", "50%"],
                data: [
                  {
                    name: "状态正常",
                    value: json.tcount[0][1]
                  },
                  {
                    name: "压力不足",
                    value: json.tcount[1][1]
                  },
                  {
                    name: "已损坏",
                    value: json.tcount[2][1]
                  }
                ],
                itemStyle: {
                  normal: {
                    show: true,
                    shadowColor: "#00000025",
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 3
                  }
                },
                label: {
                  show: true,
                  position: "outisde",
                  formatter: "{b}:\n{c}个"
                }
              }
            ]
          };
          this.$Crender("chart-water-source", this.option);
          var normalCount = json.tcount[0][1];
          var abnormalCount = json.tcount[1][1] + json.tcount[2][1]
          this.percentage = ((abnormalCount / (abnormalCount + normalCount))*100).toFixed(2)
          this.loading = false;
        });
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

<style scoped>
.chart{
    height:410px;
}
</style>